<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    *{
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
    }
    body{
      padding-top: 25px;
    }

    .rg_layout{
      width: 900px;
      height: 500px;
      border: 8px solid #EEEEEE;
      background-color: white;
      /*让div水平居中*/
      margin: auto;
    }

    .rg_left{
      /*border: 1px solid red;*/
      float: left;
      margin: 15px;
    }
    .rg_left > p:first-child{
      color:#FFD026;
      font-size: 20px;
    }

    .rg_left > p:last-child{
      color:#A6A6A6;
      font-size: 20px;
    }


    .rg_center{
      float: left;
    }

    .rg_right{
      /*border: 1px solid red;*/
      float: right;
      margin: 15px;
    }

    .rg_right > p:first-child{
      font-size: 15px;

    }
    .rg_right p a {
      color:pink;
    }

    .td_left{
      width: 100px;
      text-align: right;
      height: 45px;
    }
    .td_right{
      padding-left: 50px ;
    }

    #username,#password,#email,#name,#tel,#birthday,#checkcode{
      width: 251px;
      height: 32px;
      border: 1px solid #A6A6A6 ;
      /*设置边框圆角*/
      border-radius: 5px;
      padding-left: 10px;
    }
    #checkcode{
      width: 110px;
    }

    #img_check{
      height: 32px;
      vertical-align: middle;
    }

    #btn_sub{
      width: 150px;
      height: 40px;
      background-color: #FFD026;
      border: 1px solid #FFD026 ;
    }
    .error{
      color:red;
    }
    #td_sub{
      padding-left: 150px;
    }

  </style>

  <!--抄写-->
  <script>
    window.onload = function (){
    //绑定表单form提交事件
    document.getElementById("form").onsubmit=function (){
      //check检查
      return checkUsername() && checkPassword() && checkEmail();
    }
    //用户名和密码绑定离焦事件
    //当用户离开input输入框时执行一段Javascript代码：
    document.getElementById("username").onblur = checkUsername;
    document.getElementById("password").onblur = checkPassword;
    document.getElementById("email").onblur =checkEmail;
    }
    function  checkEmail(){
      let email_text=document.getElementById("email").value;
      //定义规则
      let reg =/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
      //验证
      let flag = reg.test(email_text);
      let s_email = document.getElementById("s_email");
      if(flag){
        s_email.innerHTML = "输入正确";
      }else{
        s_email.innerHTML = "用户名格式有误";
      }
      return flag;
    }

    function show(name,reg,mess) {
      //获取用户名
      let username = document.getElementById(name).value;
      //规则
      let reg_username = new RegExp(reg);
      //值是否符合
      let flag = reg_username.test(username);
      //提示 获取span标签
      let s_username = document.getElementById("s_" + name);

      if (flag) {
        s_username.innerHTML = "输入正确";
      } else {
        s_username.innerHTML = mess;
      }
      return flag;
    }

      //检验用户名
      function checkUsername(){
        return show("username","/^w{6,12}$/","用户名输入有误");
      }

      //检验密码
      function checkPassword(){
        return show("password","/^w{6,12}$/","密码格式有误");
      }

  </script>
</head>
<body>
<div class="rg_layout">
  <div class="rg_left">
    <p>新用户注册</p>
    <p>USER REGISTER</p>
  </div>
  <div class="rg_center">
    <div class="rg_form">
      <!--定义表单 form-->
      <form action="#" id="form" method="get">
        <table>
          <tr>
            <td class="td_left"><label for="username">用户名</label></td>
            <td class="td_right">
              <input type="text" name="username" id="username" placeholder="请输入用户名">
              <span id="s_username" class="error"></span>
            </td>
          </tr>

          <tr>
            <td class="td_left"><label for="password">密码</label></td>
            <td class="td_right">
              <input type="password" name="password" id="password" placeholder="请输入密码">
              <span id="s_password" class="error"></span>
            </td>
          </tr>

          <tr>
            <td class="td_left"><label for="email">Email</label></td>
            <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱">
              <span id = "s_email" class="error"></span>
            </td>

          </tr>

          <tr>
            <td class="td_left"><label for="name">姓名</label></td>
            <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
          </tr>

          <tr>
            <td class="td_left"><label for="tel">手机号</label></td>
            <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
          </tr>

          <tr>
            <td class="td_left"><label>性别</label></td>
            <td class="td_right">
              <input type="radio" name="gender"  value="male" checked> 男
              <input type="radio" name="gender" value="female"> 女
            </td>
          </tr>

          <tr>
            <td class="td_left"><label for="birthday">出生日期</label></td>
            <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
          </tr>

          <tr>
            <td class="td_left"><label for="checkcode" >验证码</label></td>
            <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
            </td>
          </tr>


          <tr>
            <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td>
          </tr>
        </table>

      </form>


    </div>

  </div>

  <div class="rg_right">
    <p>已有账号?<a href="#">立即登录</a></p>
  </div>
</div>
</body>

</html>